<script setup>
import axios from "axios";
import { onMounted, ref } from "vue";
import { Document, Menu as IconMenu, Location, Setting } from "@element-plus/icons-vue";

var device_info = ref({
  product_id: "-",
  device_id: "-",
  hw_version: "-",
  sw_version: "-",
});

var property_info = ref({
  bms_soc: 0,
  clean_height: 0,
  dirty_height: 0,

  emergency: false,
  acc: false,
  crash: false,
  fall: false,
});

var fault_list = ref([]);

onMounted(() => {
  if ("WebSocket" in window) {
    //这里对路径进行了配置,关于.env请看上一篇文章
    // const wsUrl = process.env.VUE_APP_WEBSOCKET_API + `userCount/${resRole.user.userName}`;
    // socket = new WebSocket(wsUrl);
    //上面两行等价于
    var webSocket = new WebSocket("ws://192.168.1.100:9090/websocket"); //直接写路径
    // var webSocket = new WebSocket("ws://192.168.36.31:8089/"); //直接写路径
    webSocket.onopen = function () {
      console.log("connect success");
      //查询版本号
      axios.get("http://192.168.1.100:9090/device/info").then((res) => {
        console.log(res.data.data.version_detail);
        if (res.data.success) {
          device_info.value.product_id = res.data.data.product_id;
          device_info.value.device_id = res.data.data.device_id;
          device_info.value.hw_version = res.data.data.version_detail.hw_version;
          device_info.value.sw_version = res.data.data.version_detail.sw_version;
        }
      });
    };

    webSocket.onmessage = function (e) {
      var data = JSON.parse(e.data);
      if ("robotShadow" in data) {
        console.log(data["robotShadow"]);
        property_info.value.bms_soc = data["robotShadow"]["property"]["bms_soc"];
        property_info.value.clean_height = data["robotShadow"]["property"]["clean_height"];
        property_info.value.dirty_height = data["robotShadow"]["property"]["dirty_height"];

        property_info.value.emergency = data["robotShadow"]["property"]["enmergency"];
        property_info.value.crash = data["robotShadow"]["property"]["crash"];
        property_info.value.fall = data["robotShadow"]["property"]["fall"];
        // console.log(property_info.value.enmergency)

        fault_list.value = data["robotShadow"]["fault"];
      }
    };

    webSocket.onclose = function () {
      console.log("connect close");
      // reconnect
    };
  } else {
    Notification.error({
      title: "错误",
      message: "您的浏览器不支持websocket，请更换Chrome或者Firefox",
    });
  }
});
</script>

<template>
  <el-card>
    <el-descriptions title="设备信息">
      <el-descriptions-item label="设备型号">{{ device_info.product_id }}</el-descriptions-item>
      <el-descriptions-item label="设备SN">{{ device_info.device_id }}</el-descriptions-item>
      <!-- <el-descriptions-item label="标签">
                <el-tag size="small">浙大新宇</el-tag>
            </el-descriptions-item> -->
      <el-descriptions-item label="硬件版本">{{ device_info.hw_version }}</el-descriptions-item>
      <el-descriptions-item label="软件版本">{{ device_info.sw_version }}</el-descriptions-item>
      <el-descriptions-item label=""></el-descriptions-item>
      <!-- <el-descriptions-item label="详细描述"> </el-descriptions-item> -->
    </el-descriptions>

    <el-divider />

    <el-descriptions title="实时状态" :column="4">
      <el-descriptions-item label="电池电量">{{ property_info.bms_soc }}%</el-descriptions-item>
      <el-descriptions-item label="污水量">{{ property_info.dirty_height }}%</el-descriptions-item>
      <el-descriptions-item label="清水量">{{ property_info.clean_height }}%</el-descriptions-item>
      <el-descriptions-item label=""></el-descriptions-item>

      <el-descriptions-item label="急停">
        <el-tag type="success" v-if="!property_info.emergency">正常</el-tag>
        <el-tag type="danger" v-else>触发</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="碰撞">
        <el-tag type="success" v-if="!property_info.crash">正常</el-tag>
        <el-tag type="danger" v-else>触发</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="跌落">
        <el-tag type="success" v-if="!property_info.fall">正常</el-tag>
        <el-tag type="danger" v-else>触发</el-tag>
      </el-descriptions-item>
      <!-- <el-descriptions-item label="钥匙">
                <el-tag type="success">正常</el-tag>
            </el-descriptions-item> -->
    </el-descriptions>

    <el-divider />

    <el-descriptions title="实时故障" :column="4"></el-descriptions>
    <el-table :data="fault_list" border style="width: 100%">
      <el-table-column prop="code" label="故障代码" width="180" />
      <el-table-column prop="name" label="故障名称" width="180" />
      <el-table-column prop="level" label="故障等级" width="180" />
      <el-table-column prop="content" label="故障描述" />
      <el-table-column prop="create_time" label="创建时间"> 
        
      </el-table-column>
    </el-table>
  </el-card>
</template>

<style lang="scss" scoped>
.common-layout,
.el-container,
.el-menu {
  height: 100%;
}
</style>
